<template>
  <div class="">
    <el-scrollbar>
      <div style="margin-top: 20px">
        <statisticalDataCard :data="cardList" width="240px"></statisticalDataCard>
      </div>
    </el-scrollbar>
    <BasicCard style="margin-top: 20px">
      <BasicVxeTable v-bind="gridOptions"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 20px">
      <BasicTitle :title="t('custom.回花产生趋势')"></BasicTitle>
      <div id="chanNengQuShiID" style="height: 400px"> </div>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import XEUtils from 'xe-utils'
  import * as echarts from 'echarts'
  import { outputColunms } from './data'
  import { COLOR_ARR } from '@/utils/constants'
  import { hexToRgba, splitTsIdToTime } from '@/utils/custom'
  import { getShiJiCanDeng_XS } from '@/api/shuJuBaoBiao'

  import statisticalDataCard from '@/views/shengChanJianShi/businessComponents/statisticalDataCard.vue'

  const { t } = useI18n()

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `shujubaobiao-shijichanneng`, // id用于缓存,务必配置
    height: 500,
    loading: true,
    columns: outputColunms,
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: t('export.统计报表')
    }
    // spanMethod({ row, rowIndex, column, visibleData }) {
    //   const spanFields = ['day', 'materialName']
    //   const cellValue = row[column.field]
    //   if (cellValue && spanFields.includes(column.field)) {
    //     const prevRow = visibleData[rowIndex - 1]
    //     let nextRow = visibleData[rowIndex + 1]
    //     if (prevRow && prevRow[column.field] === cellValue) {
    //       return { rowspan: 0, colspan: 0 }
    //     } else {
    //       let countRowspan = 1
    //       while (nextRow && nextRow[column.field] === cellValue) {
    //         nextRow = visibleData[++countRowspan + rowIndex]
    //       }
    //       if (countRowspan > 1) {
    //         return { rowspan: countRowspan, colspan: 1 }
    //       }
    //     }
    //   }
    // }
  })

  const cardList = ref<any>([])
  const zeXianXzhou = ref<any>([])
  const zeXianTuData = ref<any>([])
  const insertStr = (source, start, newStr) => {
    return source.slice(0, start) + newStr + source.slice(start)
  }
  const getList = () => {
    getShiJiCanDeng_XS(2507)
      .then((res: any) => {
        gridOptions.loading = false
        cardList.value = handleFormatCardData(res.byMaterialStstistics)
        const result = res.byDayMaterialStstistics.map((value) => {
          return {
            day: splitTsIdToTime(value.day),
            materialName: value.materialName,
            theoreticalYarnWeight:
              value.theoreticalYarnWeight === null
                ? value.theoreticalYarnWeight
                : Math.round(value.theoreticalYarnWeight * 100) / 100,
            actualYarnWeight:
              value.actualYarnWeight === null
                ? value.actualYarnWeight
                : Math.round(value.actualYarnWeight * 100) / 100,
            breakWeight:
              value.breakWeight === null
                ? value.breakWeight
                : Math.round(value.breakWeight * 100) / 100
          }
        })

        gridOptions.data = XEUtils.orderBy(result, [['materialName'], ['day', 'desc']])

        res.byDayStstistics.forEach((value) => {
          let riQi = value.day.toString().slice(2)
          zeXianXzhou.value.push(insertStr(riQi, 2, '-'))
          zeXianTuData.value.push(
            value.breakWeight === null
              ? value.breakWeight
              : Math.round(value.breakWeight * 100) / 100
          )
        })
        handleSetVisitChart()
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  const handleFormatCardData = (data) => {
    return data.map((item) => {
      return {
        title: item.materialName,
        content: [
          {
            label: t('custom.理论产量'),
            value:
              item.theoreticalYarnWeight === null
                ? item.theoreticalYarnWeight
                : Math.round(item.theoreticalYarnWeight * 100) / 100,
            unit: 'kg'
          },
          {
            label: t('custom.实际产量'),
            value:
              item.actualYarnWeight === null
                ? item.actualYarnWeight
                : Math.round(item.actualYarnWeight * 100) / 100,
            unit: 'kg'
          },
          {
            label: t('custom.回花重量'),
            value:
              item.breakWeight === null
                ? item.breakWeight
                : Math.round(item.breakWeight * 100) / 100,
            unit: 'kg'
          }
        ]
      }
    })
  }

  const myChart = ref()
  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('chanNengQuShiID'))
    let option = {
      backgroundColor: '#fff',
      color: COLOR_ARR,
      legend: {
        top: 10
      },
      tooltip: {
        trigger: 'axis'
        // formatter: function(prams) {
        //   return prams[0].axisValue + '<br/>'  + prams[0].data + ' Nm³'
        // }
      },
      grid: {
        top: 55,
        left: 40,
        right: 45,
        bottom: 30,
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          // axisLabel: {
          //   interval: 0,//横轴信息全部显示
          //   rotate: -15, //倾斜度 -90 至 90 默认为0
          //   margin: 10, //刻度标签与轴线之间的距离
          //   textStyle: {
          //     color: "#333",//颜色
          //   },
          // },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#333'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#D9D9D9'
            }
          },
          data: zeXianXzhou.value
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: 'KG',
          axisLabel: {
            textStyle: {
              color: '#666'
            }
          },
          nameTextStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e3e1e1'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e3e1e1'
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: '回花',
          type: 'line',
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: COLOR_ARR[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(COLOR_ARR[0], 0.5),
              shadowOffsetY: 8
            }
          },
          symbol: 'circle', // 数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(COLOR_ARR[0], 0.3)
                  },
                  {
                    offset: 1,
                    color: hexToRgba(COLOR_ARR[0], 0.1)
                  }
                ],
                false
              ),
              shadowColor: hexToRgba(COLOR_ARR[0], 0.1),
              shadowBlur: 10
            }
          },
          data: zeXianTuData.value
        }
      ]
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  onMounted(() => {
    getList()
  })
</script>
